<!-- target: formSubmitSection -->
<esui-panel class="ui-form-submit-section" data-ui-id="submit-section">
    <button type="submit" data-ui-type="Button" data-ui-id="submit" data-ui-group="submit" class="submit-button"><!-- if: ${formType} === 'update' -->完成<!-- else -->新建<!-- /if --></button>
    <div data-ui-type="Button" data-ui-id="cancel" data-ui-group="submit" data-ui-skin="link">取消</div>
</esui-panel>

<!-- // 由label + value + tip组成的表单field模板，content可以是任意内容 -->
<!-- target: formLabelValueField -->
<!-- var: label = ${label} || ${title} -->
<!-- var: id = ${id} || ${name} || ${field} -->
<!-- var: commonFieldClass = ${required} ? 'ui-form-required' : '' -->
<!-- if: ${fieldClasses} -->
<div class="${fieldClasses} ui-form-field">
<!-- else -->
<div class="ui-form-field">
<!-- /if -->
    <!-- if: ${label} -->
    <div class="${commonFieldClass} ui-form-key">
        <esui-label class="ui-form-field-label" data-ui-for-target="${id | dasherize}">${label}：</esui-label>
    </div>
    <!-- /if -->
    <div class="ui-form-value">
        <!-- block: value --><!-- /block -->
        <!-- if: ${tipTitle} || ${tip} -->
        <esui-tip class="ui-form-field-tip" title="${tipTitle}">${tip}</esui-tip>
        <!-- /if -->
    </div>
</div>

<!-- 由label + boxgroup + tip组成的表单field模板，content可以是任意内容 -->
<!-- target: formLabelBoxGroupField -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<!-- if: ${fieldClasses} -->
<div class="ui-form-field ${fieldClasses}">
<!-- else -->
<div class="ui-form-field">
<!-- /if -->
    <!-- if: ${title} -->
    <esui-label class="ui-form-key" data-ui-for-target="${id | dasherize}">${title}：</esui-label>
    <!-- /if -->
    <div class="ui-form-value">
        <esui-box-group
            data-ui-id="${id | dasherize}"
            data-ui-box-class="ui-radio-custom"
            data-ui-box-type="radio"
            data-ui-name="${name}"
            data-ui-raw-value="@${field}"
            <!-- if: ${vertical} -->data-ui-orientation="vertical"<!-- /if -->
            <!-- if: ${disabled} -->data-ui-disabled="${disabled}"<!-- /if -->
            <!-- if: ${radioTab} -->data-ui-extension-radiotab-type="RadioTab"<!-- /if -->
            <!-- if: ${datasource} -->data-ui-datasource="@${datasource}"<!-- /if -->
        >
            <!-- block: radioGroup -->
            <!-- for: ${radios} as ${radio}, ${index} -->
            <input type="radio" name="${field}" id="${field}-${index}" value="${radio.value}"
            <!-- if: ${value} === ${radio.value} --> checked <!-- /if -->>
            <label for="${field}-${index}">${radio.text}</label>
            <!-- /for -->
            <!-- /block -->
        </esui-box-group>
        <!-- if: ${tipTitle} || ${tip} -->
        <esui-tip class="ui-form-field-tip" title="${tipTitle}">${tip}</esui-tip>
        <!-- /if -->
        <!-- block: content --><!-- /block -->
    </div>
</div>

<!-- target: formPage -->
<esui-panel data-ui-id="form-page" class="ui-form-page ui-page">
    <div class="ui-page-crumb">
        <!-- block: crumb --><!-- /block -->
        <!-- block: tip --><!-- /block -->
    </div>
    <div class="ui-page-content">
        <!-- block: formMain --><!-- /block -->
    </div>
</esui-panel>

<!-- target: formView -->
<div class="ui-form-view">
    <form data-ui-type="Form" data-ui-id="form" novalidate="novalidate">
        <!-- block: sections --><!-- /block -->
        <!-- import: formSubmitSection -->
    </form>
</div>

<!-- 在formView基础上，将submit变为一个可自定义设置页面操作按钮的`contentplaceholder` -->
<!-- 用来满足页面在 `提交` 与 `取消` 两种情况基础上有额外功能的需求 -->
<!-- target: customFormView -->
<div class="ui-form-view">
    <form data-ui-type="Form" data-ui-id="form" novalidate="novalidate">
        <esui-panel class="content-main" data-ui-id="form-content-main"
            data-ui-extension-command-type="Command" data-command="form-content-click">
            <!-- block: sections --><!-- /block -->
        </esui-panel>
        <esui-panel class="ui-form-submit-section" data-ui-id="submit-section">
            <div class="ui-form-buttons">
                <!-- block: submitSection --><!-- /block -->
            </div>
        </esui-panel>
    </form>
</div>

<!-- target: formToggleSectionHead -->
<esui-toggle-panel data-ui-position="fixed" data-ui-variants="angle"
    <!-- if: ${expanded} -->data-ui-expanded="true"<!-- /if --> >
    <div>${title}</div>
    <div>

<!-- target: formToggleSectionTail -->
    </div>
</esui-toggle-panel>

<!-- target: textbox -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<!-- var: width = ${width} || 230 -->
<!-- var: length = ${length} || 100 -->
<!-- var: trim = !${notTrim} -->
<esui-text-box
    <!-- if: ${id} -->
    data-ui-id="${id | dasherize}"
    data-ui-validity-label="${id | dasherize}-validity-label"
    <!-- /if -->
    <!-- if: ${name} -->name="${name}"<!-- /if -->
    <!-- if: ${title} -->title="${title}"<!-- /if -->
    <!-- if: ${field} -->data-ui-raw-value="@${field}"<!-- /if -->
    <!-- if: ${mode} -->data-ui-mode="${mode}"<!-- /if -->
    <!-- if: ${required} -->data-ui-required="required"<!-- /if -->
    <!-- if: ${requiredErrorMessage} -->data-ui-required-error-message="${requiredErrorMessage}"<!-- /if -->
    <!-- if: ${width} -->data-ui-width="${width}"<!-- /if -->
    <!-- if: ${height} -->data-ui-height="${height}"<!-- /if -->
    <!-- if: ${length} -->data-ui-length="${length}"<!-- /if -->
    <!-- if: ${minLength} --> data-ui-min-length="${minLength}"<!-- /if -->
    <!-- if: ${maxLength} --> data-ui-max-length="${maxLength}"<!-- /if -->
    <!-- if: ${min} || ${min} === 0 -->data-ui-min="${min}"<!-- /if -->
    <!-- if: ${minErrorMessage} -->data-ui-min-error-message="${minErrorMessage}"<!-- /if -->
    <!-- if: ${max} || ${max} === 0 -->data-ui-max="${max}"<!-- /if -->
    <!-- if: ${maxErrorMessage} -->data-ui-max-error-message="${maxErrorMessage}"<!-- /if -->
    <!-- if: ${pattern} -->data-ui-pattern="${pattern}"<!-- /if -->
    <!-- if: ${patternErrorMessage} -->data-ui-pattern-error-message="${patternErrorMessage}"<!-- /if -->
    <!-- if: ${countWord} -->data-ui-extension-count-type="WordCount"<!-- /if -->
    <!-- if: ${prefix} -->data-ui-hint="${prefix}" data-ui-hint-type="prefix"<!-- /if -->
    <!-- if: ${suffix} -->data-ui-hint="${suffix}" data-ui-hint-type="suffix"<!-- /if -->
    <!-- if: ${group} -->data-ui-group="${group}"<!-- /if -->
    <!-- if: ${description} -->data-ui-extension-validation-type="ValidationCleaner"<!-- /if -->
    <!-- if: ${compare} -->data-ui-compare="${compare | dasherize}"<!-- /if -->
    <!-- if: ${passwordRule} -->data-ui-password-rule="${passwordRule}"<!-- /if -->
    <!-- if: ${placeholder} -->data-ui-placeholder="${placeholder}"<!-- /if -->
    <!-- if: ${disabled} -->data-ui-disabled="true"<!-- /if -->
    <!-- if: ${readOnly} -->data-ui-read-only="true"<!-- /if -->
    <!-- if: ${trim} -->data-ui-extension-trim-type="TrimInput"<!-- /if -->
    <!-- if: ${childName} -->data-ui-child-name="${childName}"<!-- /if -->
    <!-- if: ${icon} -->data-ui-icon="${icon}"<!-- /if -->
    <!-- if: ${variants} -->data-ui-variants="${variants}"<!-- /if -->
    >
</esui-text-box>
<!-- if: ${hint} -->
<esui-label class="suffix-hint" data-ui-id="${id | dasherize}-suffix-hint">${hint}</esui-label>
<label data-ui-type="Validity" data-ui-id="${id | dasherize}-validity-label"></label>
<!-- /if -->
<!-- if: ${description} -->
<div class="ui-form-field-description">${description}</div>
<!-- /if -->

<!-- target: textarea -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<!-- var: width = ${width} || 360 -->
<!-- var: height = ${height} || 130 -->
<!-- var: trim = !${notTrim} -->
<div class="ui-form-field-frame">
    <div data-ui-type="Validity" data-ui-id="${id | dasherize}-validity-label"></div>
    <div class="ui-form-field-description-block">${description}</div>
    <esui-text-box name="${name}" title="${title}" data-ui-max-length="-1"
        data-ui-id="${id | dasherize}" data-ui-raw-value="@${field}" data-ui-mode="textarea"
        data-ui-validity-label="${id | dasherize}-validity-label"
        <!-- if: ${required} -->data-ui-required="required"<!-- /if -->
        <!-- if: ${width} -->data-ui-width="${width}"<!-- /if -->
        <!-- if: ${height} -->data-ui-height="${height}"<!-- /if -->
        <!-- if: ${length} -->data-ui-length="${length}"<!-- /if -->
        <!-- if: ${countWord} -->data-ui-extension-count-type="WordCount"<!-- /if -->
        <!-- if: ${group} -->data-ui-group="${group}"<!-- /if -->
        <!-- if: ${description} -->data-ui-extension-validation-type="ValidationCleaner"<!-- /if -->
        <!-- if: ${trim} -->data-ui-extension-trim-type="TrimInput"<!-- /if --> >
    </esui-text-box>
</div>

<!-- target: checkbox -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<esui-check-box type="checkbox" name="${name}" title="${text}"
    data-ui-id="${id | dasherize}" data-ui-raw-value="@${field}" >
</esui-check-box>

<!-- target: calendar -->
<!-- var: id = ${id} || ${name} -->
<!-- if: ${multiple} -->
<esui-range-calendar data-ui-id="${id | dasherize}" data-ui-name="${name}"
    data-ui-raw-value="@${field}" data-ui-auto-hide-layer="true"
    <!-- if: ${range} -->data-ui-range="${range}"<!-- /if -->
    <!-- if: ${validityLabel} -->data-ui-validity-label="${validityLabel}"<!-- /if --> >
</esui-range-calendar>
<!-- else -->
<esui-calendar data-ui-id="${id | dasherize}" data-ui-name="${name}"
    data-ui-raw-value="@${field}" data-ui-auto-hide-layer="true"
    <!-- if: ${range} -->data-ui-range="${range}"<!-- /if -->
    <!-- if: ${validityLabel} -->data-ui-validity-label="${validityLabel}"<!-- /if --> >
</esui-calendar>
<!-- /if -->

<!-- target: rangeCalendar -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<esui-range-calendar
    data-ui-id="${id | dasherize}"
    data-ui-name="${name}"
    data-ui-raw-value="@${field}"
    <!-- if: ${range} -->data-ui-range="@${range}"<!-- /if -->
    <!-- if: ${isEndless} -->data-ui-is-endless="${isEndless}"<!-- /if -->
    data-ui-showed-short-cut="${i18n.common.yestoday},${i18n.common.last7},${i18n.common.lastWeek}"></esui-range-calendar>

<!-- target: inputGroup -->
<!-- var: name = ${name} || ${field} -->
<esui-input-group data-ui-id="${id | dasherize}"
    data-ui-name="${name}" data-ui-datasource="@${field}"
    <!-- if: ${subRules} -->data-ui-sub-rules="${subRules}"<!-- /if -->
    <!-- if: ${maxCount} -->data-ui-max-count="${maxCount}" <!-- /if -->
    <!-- if: ${addIconText} -->data-ui-add-icon-text="${addIconText}" <!-- /if -->
    <!-- if: ${width} -->data-ui-width="${width}"<!-- /if -->
    <!-- if: ${disabled} -->data-ui-disabled="${disabled}"<!-- /if -->></esui-input-group>

<!-- target: uploaderWithPreview -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<!-- var: text = ${text} || ('上传' + ${title}) -->
<esui-image-panel class="preview preview-horizontal"
    data-ui-id="${id | dasherize}-preview"
    data-ui-name="${name}"
    data-ui-raw-value="@${field}"
    <!-- if: ${imageWidth} -->data-ui-image-width="${imageWidth}"<!-- /if -->
></esui-image-panel>
<div class="uploader-detail">
    <esui-uploader
        data-ui-id="${id | dasherize}-uploader"
        data-ui-text="${text}"
        data-ui-action="${uploadUrl}"
        data-ui-accept='.gif,.jpg,.png'
        data-ui-param-key='filename'
        <!-- if: ${multiple} -->data-ui-multiple="true"<!-- /if -->
        data-ui-progress-container="${id}-message-container"
    ></esui-uploader>
    <div id="${id}-message-container"></div>
    <!-- if: ${descriptions} && ${descriptions.length} > 0 -->
    <ul class="uploader-desc">
        <!-- for: ${descriptions} as ${desc}, ${index} -->
        <!-- var: index = ${index} + 1 -->
        <li>${index}. ${desc}</li>
        <!-- /for -->
    </ul>
    <!-- /if -->
</div>

<!-- target: uploaderWithPreviewField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- import: uploaderWithPreview -->
<!-- /block -->

<!-- target: uploaderWithPreviewList -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<!-- var: text = ${text} || ('上传' + ${title}) -->
<esui-uploader
    data-ui-id="${id | dasherize}-uploader"
    data-ui-text="${text}"
    data-ui-action="${uploadUrl}"
    data-ui-accept='.gif,.jpg,.png'
    data-ui-param-key='filename'
    <!-- if: ${multiple} -->data-ui-multiple="true"<!-- /if -->
    data-ui-progress-container="${id}-message-container"
></esui-uploader>
<div id="${id}-message-container"></div>
<!-- if: ${descriptions} && ${descriptions.length} > 0 -->
<ul class="uploader-desc">
    <!-- for: ${descriptions} as ${desc}, ${index} -->
    <!-- var: index = ${index} + 1 -->
    <li>${index}. ${desc}</li>
    <!-- /for -->
</ul>
<!-- /if -->
<esui-image-list 
    data-ui-id="${id | dasherize}-preview"
    data-ui-name="${name}"
    data-ui-raw-value="@${field}"
    <!-- if: ${imageWidth} -->data-ui-image-width="${imageWidth}"<!-- /if -->
></esui-image-list>

<!-- target: uploaderWithPreviewListField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- import: uploaderWithPreviewList -->
<!-- /block -->

<!-- target: moneyTextboxField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- var: prefix = ${prefix} || '¥' -->
    <!-- var: pattern = '@rule.money.pattern' -->
    <!-- import: textbox -->
<!-- /block -->

<!-- target: urlTextboxField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- var: prefix = ${prefix} || 'http://' -->
    <!-- var: hintType = ${textboxHintType} || 'prefix' -->
    <!-- import: textbox -->
<!-- /block -->

<!-- target: labelField(master = formLabelValueField) -->
<!-- block: value -->
    <esui-label class="ui-form-field-label">${text}</esui-label>
<!-- /block -->

<!-- target: selector -->
<!-- var: id = ${id | dasherize} || ${field} + 'Select' -->
<select
    name="${field}" data-ui-type="Select"
    data-ui-id="${id | dasherize}"
    data-ui-raw-value="@${field}"
    <!-- if: ${width} -->data-ui-width="${width}"<!-- /if -->
>
    <!-- block: options -->
    <!-- for: ${options} as ${option} -->
    <option value="${option.value}">${option.text}</option>
    <!-- /for -->
    <!-- /block -->
</select>

<!-- target: labelSelectorField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- import: selector -->
<!-- /block -->

<!-- target: textboxField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- import: textbox -->
<!-- /block -->

<!-- target: multiSelectField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- import: multiSelect -->
<!-- /block -->

<!-- target: textareaField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- import: textarea -->
<!-- /block -->

<!-- target: checkboxField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- var: title = '@dictionary.percent.hint' || ' %' -->
    <!-- var: hintType =  '@dictionary.percent.hintType' || 'suffix' -->
    <!-- var: pattern = '@rule.money.pattern' -->
    <!-- import: checkbox -->
<!-- /block -->

<!-- target: calendarField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- import: calendar -->
<!-- /block -->

<!-- target: inputGroupField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- import: inputGroup -->
<!-- /block -->

<!-- target: formCrumb -->
<!-- if: ${formType} === 'create' -->
<span>新建${title}</span>
<!-- elif: ${formType} === 'update' -->
<span>修改${title}</span>
<!-- else -->
<span>查看${title}</span>
<!-- /if -->

<!-- target: multiSelect -->
<!-- var: id = ${id} || ${field} -->
<!-- var: width = ${width} || 180 -->
<select data-ui-type="MultiSelect" data-ui-id="${id | dasherize}"
    data-ui-width="${width}" name="${field}" data-ui-raw-value = "@${field}"
    <!-- if: ${multiple} -->multiple="multiple"<!-- /if -->
>
    <!-- for: ${datasource} as ${item}, ${index} -->
    <option value="${item.value}">${item.text}</option>
    <!-- /for -->
</select>

<!-- target: boxGroup -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<!-- var: boxType = ${boxType} || 'radio' -->
<esui-box-group data-ui-id="${id | dasherize}"
    data-ui-box-type="${boxType}" data-ui-name="${name}" data-ui-raw-value="@${field}"
    <!-- if: ${vertical} -->data-ui-orientation="vertical"<!-- /if -->
    <!-- if: ${radioTab} -->data-ui-extension-radiotab-type="RadioTab"<!-- /if -->
    <!-- if: ${datasource} -->data-ui-datasource="@${datasource}"<!-- /if -->
>
    <!-- block: radioGroup --><!-- /block -->
</esui-box-group>
<!-- block: content --><!-- /block -->

<!-- target: textLine -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<esui-text-line
    data-ui-id="${id}"
    data-ui-name="${name}"
    data-ui-raw-value="@${field}"
></esui-text-line>

<!-- target: globalError -->
<div class="global-error-container">
    <span data-ui-type="Validity" data-ui-id="global-error"></span>
</div>

<!-- target: formPerson(master = formLabelValueField) -->
<!-- block: value -->
    <!-- use:
        textbox(
            field = ${field} + '.name',
            length = 60,
            width = 150
        )
    -->
    <span class="ml10 mr10">联系电话:</span>
    <!-- use:
        textbox(
            field = ${field} + '.tel',
            length = 60,
            width = 150
        )
    -->
    <span class="ml10 mr10">手机号码:</span>
    <!-- use:
        textbox(
            field = ${field} + '.phone',
            length = 60,
            width = 150
        )
    -->
<!-- /block -->

<!-- target: time -->
<!-- var: dateName = ${dateName} || ${dateField} -->
<!-- var: dateId = ${dateId} || ${dateName} -->
<!-- var: timeName = ${timeName} || ${timeField} -->
<!-- var: timeId = ${timeId} || ${timeName} -->
<!-- use:
    calendar(
        id = ${dateId}, field = ${dateField}, name = ${dateName}
    )
-->
<!-- use:
    selector(
        id = ${timeId}, field = ${timeField}, name = ${timeName},
        width = 140, options = ${timeList}
    )
-->

<!-- target: timeField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- import: time -->
<!-- /block -->

<!-- target: commonTip -->
<!-- if: ${hasSpecialTimeSpan} -->
<div class="ui-form-row">
    <!-- use:
        labelSelectorField(
            id = ${specialTimeSpanId},
            field = 'specialTimeSpan',
            title = '特殊时段',
            options = ${system.specialTimeSpanList}
        )
    -->
</div>
<!-- /if -->

<!-- if: ${hasBookInfo} -->
<div class="ui-form-row">
    <!-- use:
        labelSelectorField(
            id = ${bookInfoId},
            field = 'bookInfo',
            title = '预约信息',
            options = ${system.bookInfoList}
        )
    -->
</div>
<!-- /if -->

<!-- if: ${hasSeatInfo} -->
<div class="ui-form-row">
<!-- use:
    labelSelectorField(
        id = ${seatInfoId},
        field = 'seatInfo',
        title = '座位提示',
        options = ${system.seatInfoList}
    )
-->
</div>
<!-- /if -->

<!-- if: ${hasTip} -->
<div class="ui-form-row">
    <!-- use:
        labelSelectorField(
            id = ${tipId},
            field = 'tip',
            title = '就餐提示',
            options = ${system.tipList}
        )
    -->
</div>
<!-- /if -->

<!-- if: ${hasInvoiceTip} -->
<div class="ui-form-row">
    <!-- use:
        labelSelectorField(
            id = ${invoiceTipId},
            field = 'invoiceTip',
            title = '发票提示',
            options = ${system.invoiceTipList}
        )
    -->
</div>
<!-- /if -->

<!-- if: ${hasSpecialTip} -->
<div class="ui-form-row">
    <!-- use:
        textboxField(
            id = ${specialTipId},
            field = 'specialTip',
            title = '特别提示',
            width = 300,
            height = 160,
            mode = 'textarea'
        )
    -->
</div>
<!-- /if -->

<!-- target: commonPrice -->
<!-- var: priceId = ${priceId} || ${priceField} -->
<!-- var: oldPriceId = ${oldPriceId} || ${oldPriceField} -->
<!-- var: oldPriceLabel = ${oldPriceLabel} || '原价' -->
<!-- var: unitField = ${unitField} || 'unit' -->
<!-- var: countField = ${countField} || 'count' -->
<span class="ml10 mr10">现价:</span>
<!-- use:
    textbox(
        id = ${priceId},
        field = ${priceField},
        width = 80,
        required = true
    )
-->
<span class="ml10 mr10">${oldPriceLabel}:</span>
<!-- use:
    textbox(
        id = ${oldPriceId},
        field = ${oldPriceField},
        width = 80,
        required = true
    )
-->

<!-- if: ${hasUnit} -->
<span class="ml10 mr10">单位:</span>
<!-- use:
    selector(
        field = ${unitField},
        options = ${system.unitList},
        required = true
    )
-->

<span class="ml10 mr10">数量:</span>
<!-- use:
    selector(
        field = ${countField},
        options = ${system.numberList},
        required = true
    )
-->
<!-- /if -->

<!-- target: richContentField(master = formLabelValueField) -->
<!-- var: id = ${id} || ${name} || ${field} -->
<!-- block: value -->
<!-- import: richContent -->
<!-- /block -->

<!-- target: richContent -->
<div
    data-ui-type="UMEditor"
    data-ui-id="${id}";
    data-ui-name="${field}";
    <!-- if: ${required} -->data-ui-required="true"<!-- /if -->
    <!-- if: ${width} -->data-ui-width="${width}"<!-- /if -->
    <!-- if: ${height} -->data-ui-height="${height}"<!-- /if -->
    data-ui-content="@${field}"
></div>

<!-- target: address -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<!-- var: width = ${width} || 230 -->
<!-- var: length = ${length} || 100 -->
<esui-address
    data-ui-id="${id | dasherize}"
    data-ui-raw-value="@${field}"
    name="${name}"
    title="${title}"
    data-ui-max-length="-1"
    data-ui-validity-label="${id | dasherize}-validity-label"
    data-ui-extension-autocomplete-type="AutoComplete"
    <!-- if: ${field} -->data-ui-raw-value="@${field}"<!-- /if -->
    <!-- if: ${query} -->data-ui-query="@${query}"<!-- /if -->
    <!-- if: ${required} -->data-ui-required="required"<!-- /if -->
    <!-- if: ${width} -->data-ui-width="${width}"<!-- /if -->
    <!-- if: ${height} -->data-ui-height="${height}"<!-- /if -->
    <!-- if: ${length} -->data-ui-length="${length}"<!-- /if -->
    <!-- if: ${description} -->data-ui-extension-validation-type="ValidationCleaner"<!-- /if -->
    <!-- if: ${placeholder} -->data-ui-placeholder="${placeholder}"<!-- /if -->
    <!-- if: ${disabled} -->data-ui-disabled="true"<!-- /if -->
    <!-- if: ${trim} -->data-ui-extension-trim-type="TrimInput"<!-- /if -->
    >
</esui-address>
<!-- if: ${hint} -->
<esui-label class="suffix-hint" data-ui-id="${id | dasherize}-suffix-hint">${hint}</esui-label>
<label data-ui-type="Validity" data-ui-id="${id | dasherize}-validity-label"></label>
<!-- /if -->
<!-- if: ${description} -->
<div class="ui-form-field-description">${description}</div>
<!-- /if -->

<!-- target: addressField(master = formLabelValueField) -->
<!-- block: value -->
    <!-- import: address -->
<!-- /block -->

<!-- target: toggleSelectField -->
<!-- var: name = ${name} || ${field} -->
<!-- var: id = ${id} || ${name} -->
<!-- var: maxLength = ${maxLength} || 100 -->
<!-- var: width = ${width} || 144 -->
<!-- var: hasRowHead = ${hasRowHead} || 'false' -->
<div class="ui-form-field">
    <!-- if: ${title} -->
    <div class="ui-form-key">
        <label>${title}</label>
    </div>
    <!-- /if -->
    <div class="ui-form-value">
        <div
            data-ui-type="ToggleSelector"
            data-ui-id="${id | dasherize}"
            data-ui-name="${name}"
            data-ui-target-control="${id | dasherize}-selector"
            data-ui-text-field="text"
            data-ui-value-field="value"
        >
            <span>请选择</span>
            <div>
                <div
                    data-ui-states="no-hover-icon"
                    data-ui-type="TreeRichSelector"
                    data-ui-id="${id | dasherize}-selector"
                    data-ui-selected-data="@${field}"
                    data-ui-datasource="@${datasource}"
                    data-ui-multi="false"
                    data-ui-has-foot="false"
                    data-ui-has-head="false"
                    data-ui-only-leaf-select="true"
                    <!-- if: ${required} -->data-ui-required="required"<!-- /if -->
                ></div>
            </div>
        </div>
    </div>
</div>

<!-- // LOGO控件 -->
<!-- target: logoField(master = formLabelBoxGroupField) -->
<!-- block: radioGroup -->
<div>
    <input type="radio" id="${field}-pic-radio" name="${name}" value="pic" <!-- if: ${fieldType} === 'pic' -->checked="checked"<!-- /if -->>
    <label for="${field}-pic-radio">图片</label>
</div>
<div>
    <input type="radio" id="${field}-text-radio" name="${name}" value="text" <!-- if: ${fieldType} === 'text' -->checked="checked"<!-- /if -->>
    <label for="${field}-text-radio">文字</label>
</div>
<!-- /block -->

<!-- block: content -->
<!-- // 图片上传控件 -->
<div id="${name}-panel-0">
    <div class="ui-form-row">
        <!-- use:
            uploaderWithPreviewField(
                id = ${id | dasherize} + '-pic',
                field = ${picField} || 'logoPic',
                text = ${picText} || '上传LOGO',
                imageWidth = ${picImageWidth} || 250,
                uploadUrl = ${uploadUrl},
                descriptions = ${picDescriptions} || ['图片尺寸不低于400*200，推荐800*400', '单张图片大小不超过300k']
            )
        -->
    </div>
</div>
<div id="${name}-panel-1">
    <div class="ui-form-row">
        <!-- use:
            textbox(
                id = ${id | dasherize} + '-text',
                field = ${textField} || 'logoPic',
                width = ${textWidth} || 300,
                required = ${textRequired}
            )
        -->
    </div>
</div>
<!-- /block -->
